<template>
    <div class="roles">
        <el-row>
          <el-col :span="24">
              <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item><a href="#">权限管理</a></el-breadcrumb-item>
                  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
              </el-breadcrumb>
          </el-col>
      </el-row>
      <el-row>
          <el-button>添加角色</el-button>
      </el-row>
       <el-table
       class="mt-20"
         v-loading="loading"
        :data="rolelist"
        border
        style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="scope">
       <el-row v-for="fristChildren in scope.row.children" :key="fristChildren.id">
         <el-col :span="4" >
           <el-tag closable @close="deleteRoles(scope.row,fristChildren.id)">{{fristChildren.authName}}</el-tag>
           <i  class="el-icon-arrow-right" v-if="fristChildren.children.length!==0"></i>
         </el-col>
         <el-col :span="20">
          <el-row v-for="secondChildren in fristChildren.children" :key="secondChildren.id">
            <el-col :span="4" >
              <el-tag type='success' closable @close="deleteRoles(scope.row,secondChildren.id)">{{secondChildren.authName}}</el-tag>
              <i class="el-icon-arrow-right" v-if="secondChildren.children.length!==0"></i>
            </el-col>
            <el-col :span="20">
              <el-tag type="warning" closable v-for="thirdChildren in secondChildren.children" :key="thirdChildren.id"  @close="deleteRoles(scope.row,thirdChildren.id)">
                 {{thirdChildren.authName}}
              </el-tag>
            </el-col>
        </el-row>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24" v-if="scope.row.children.length ===0">还没有为当前角色分配权限，请前往分配</el-col>
       </el-row>
      </template>
    </el-table-column>

          <el-table-column
              type="index"
              width="35">
          </el-table-column>
          <el-table-column
              prop="roleName"
              label="角色名称"
              width="150px">
          </el-table-column>
          <el-table-column
              prop="roleDesc"
              label="描述"
              width="130px">
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button size="mini" type="primary" icon="el-icon-edit" plain @click="showeditUser(scope.row)"></el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" plain @click="showdeleteUser(scope.row)"></el-button>
                  <el-button size="mini" type="warning" icon="el-icon-check" title="授权角色" plain @click="showgrantRoles(scope.row)"></el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 角色分配权限 -->
      <el-dialog title="授权角色" :visible.sync="showdialogroles">
        <div class="containor_tree">
          <el-tree
          :data="data2"
          show-checkbox
          node-key="id"
          ref="tree"
          :default-expand-all="true"
          :default-checked-keys="selectRoles"
          :props="defaultProps">
        </el-tree>
        </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showdialogroles = false">取 消</el-button>
        <el-button type="primary" @click="sureRoles">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import { grantUser,deleteRolesRight,getright,RolesRight } from "@/api";
export default {
  data() {
    return {
      loading: true,
      rolelist: [],
      addform: [{}],
      showdialogroles:false,
      data2: [],
      currentRole:{}, // 保存点击的角色
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      selectRoles:[],
      rids:''
    };
  },
  created() {
    this.initRoles();
  },
  methods: {
    initRoles() {
      (this.loading = true),
        grantUser().then(res => {
          console.log(res);
          this.rolelist = res.data;
        });
      this.loading = false;
    },
    // 角色分配权限
    deleteRoles(row,rightsId){
      console.log(row,rightsId);
      deleteRolesRight({roleId: row.id, rightId: rightsId}).then(res=>{
        // console.log(res)
       if(res.meta.status === 200){
          row.children = res.data
       }else{
         $message:{
           type:'error'
           message:res.meta.msg
         }
       }
      })
    },
    showgrantRoles(row){
        this.showdialogroles = true 
        this.currentRole = row
        getright({type:'tree'}).then(res=>{
          console.log(res,12);
          if(res.meta.status == 200){
              this.data2 = res.data
          }else{
            this.$message({
              type:'error',
              message:res.meta.msg
            })
          }
        })
        /* 先让选中的清空 */
        this.selectRoles.length = 0
        /* 三次循环，拿到第三层 */
        console.log(this.currentRole.children);
       this.currentRole.children.forEach(frist=>{
         if(frist.children && frist.children !==0){
           frist.children.forEach(second=>{
              if(second.children && second.children !==0){
                second.children.forEach(third=>{
                  this.selectRoles.push(third.id)
                })
              }
           })
         }
       })
    },
    // 为角色指定权限
    sureRoles(){
      var rids = this.$refs.tree.getCheckedKeys().join(',');
      console.log(rids,21);
      RolesRight(this.currentRole.id,{rids:rids}).then(res=>{
         console.log(res,123)
       if (res.meta.status === 200) {
          this.$message({
            type: 'success',
            message: res.meta.msg
          })
          this.showdialogroles= false
          this.initRoles()
        }else{
          this.$message({
            type:'error',
            message:res.meta.msg
          })
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
  .roles{
    .el-tag{
      margin-right:10px;
      margin-bottom:8px;
    }
    .containor_tree{
      height:300px;
      overflow:auto;
    }
  }
</style>


